<template>
  <div class="feeds-container">
    <Waterfall :list="mineProductStore.collectedList" imgSelector="image" :width="100"
      :animationEffect="'animate__zoomIn'" :breakpoints="breakpoints" :animationDelay="200" :animationDuration="1000"
      :posDuration="800" infinite-scroll-immediate="false" v-infinite-scroll="loadMore" infinite-scroll-delay="2000">
      <template #default="{ item, url }">
        <div class="waterfull-card" @click="showDetail(item.id)">
          <!-- 封面 -->
          <LazyImg :url="Array.isArray(url) ? url[0] : url" style="border-radius: 10px;" />

          <div class="footer">
            <!-- 标题 -->
            <div class="title"><span>{{ item.title }}</span></div>
            <!-- 价格和发货方式 -->
            <div class="price">
              <div style="display: flex; gap: 5px;align-items: center;">
                <span style="color: red; font-weight: 600; font-size: 16px;">￥{{ item.price }}</span>
                <span style="font-size: 12px; color: #666666; text-decoration: line-through;">￥{{ item.originalPrice
                  }}</span>
              </div>
              <span style="font-size: 12px;color: #666666;">{{ item.postType === 0 ? '邮寄' : '自提' }}</span>
            </div>
            <!-- 头像和想要人数 -->
            <div class="avatar-Like">
              <div class="avatar">
                <img class="avatar-img"
                  :src="item.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                  style="width: 25px; border-radius: 50%; outline: none;">
                <span style="margin-left: 5px; color: #666666; font-size: 12px;">{{ item.nickName }}</span>
              </div>
              <div class="like">
                <span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang"></use>
                  </svg>
                </span>
                <span style="font-size: 12px; color: #666666;">{{ item.likeCount > 999 ? "999+" : item.likeCount
                  }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Waterfall>
  </div>
  <!-- 商品详情卡片 -->
  <productInfoDetail ref="detail" />
</template>

<script setup lang='ts'>
// import { ref, reactive } from 'vue'
import { Waterfall, LazyImg } from 'vue-waterfall-plugin-next'
import productInfoDetail from '@/components/productDetail/ProductInfoDetail.vue'
import 'vue-waterfall-plugin-next/dist/style.css'
import { useMineProductStore } from '@/stores/modules/mineProduct'
import { onMounted, reactive, ref } from 'vue'
const mineProductStore = useMineProductStore()
// 详情组件
const detail = ref()

// 在 onMounted 中检查并加载数据
onMounted(() => {
  loadData()
})

// 加载数据
const loadData = async () => {
  mineProductStore.resetCollected()
  await getMineCollectedProductList()
}

// 加载更多
const loadMore = () => {
  getMineCollectedProductList()
}

// 点击商品卡片，显示商品详情
const showDetail = (productId: string) => {
  useProductDetailStore().getProductDetail(productId)
  detail.value.show()
}

// 获取"我的"界面用户的商品列表
import useMineProduct from '@/hooks/useMineProduct'
import { useProductDetailStore } from '@/stores';
const { getMineCollectedProductList } = useMineProduct()


const breakpoints = reactive({
  1200: {
    // when wrapper width < 1200
    rowPerView: 5,
  },
  800: {
    // when wrapper width < 800
    rowPerView: 4,
  },
  500: {
    // when wrapper width < 500
    rowPerView: 2,
  },
})
</script>

<style lang='less' scoped>
.feeds-container {
  .waterfull-card {
    transition: all .4s;

    &:hover {
      cursor: pointer;
      transform: translateY(-10px);
    }

    .footer {
      padding: 10px 0;

      .title {
        height: 24px;
        font-weight: 600;
        display: block;
        padding-left: 3px;
      }

      .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .avatar-Like {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;

        .avatar {
          display: flex;
          align-items: center;
        }

        .like {
          display: flex;
          align-items: center;

          .icon {
            width: 1em;
            height: 1em;
            fill: currentColor;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
